Prefetching in SvelteKit allows your app to load routes or data in advance, so navigation feels instant. This improves performance and user experience by reducing the time it takes to render new pages.
SvelteKit detects a
data-sveltekit-prefetchattribute or a programmatic prefetch call.It preloads the JavaScript and any necessary data for that route in the background.
When the user navigates, the page loads instantly without waiting for network requests.
To enable prefetching for a specific link, add the data-sveltekit-prefetch attribute to <a> tags.
This will fetch the code and data for the /about route as soon as the user hovers over or touches the link, making the navigation instant.
You can also prefetch routes dynamically using the prefetch method from $app/navigation.
If a route uses a load function to fetch data, SvelteKit will prefetch both the JavaScript and the data returned by the load function, ensuring the page is ready immediately.
Use prefetching for frequently visited or critical routes like dashboards or product pages.
Avoid prefetching too many routes at once to prevent unnecessary network load.
Combine prefetching with code splitting to keep initial bundle sizes small.